<template>
	<div class="child-box content-border-bg content-fade-right">
		<small-title title="拥堵指数排名TOP3" />
		<div class="sub-title">早、晚高峰时间段 最拥堵区域为 {{ tableData[0] ? tableData[0].nodeName : '' }} 区</div>
		<div class="right-table">
			<div class="tab-heard">
				<div>排名</div>
				<div>行政区域</div>
				<div>拥堵指数</div>
				<div>平均运行速度</div>
				<!-- <div>拥堵时长</div> -->
			</div>
			<div v-for="(item, index) in tableData" :key="index" class="tab-body"
				:style="{ backgroundColor: index % 2 == 0 ? 'rgba(85, 137, 250, 0.226)' : 'none' }">
				<div>
					<img v-if="index == 0" src="@/assets/images/home/first.png" alt="" />
					<img v-else-if="index == 1" src="@/assets/images/home/two.png" alt="" />
					<img v-else-if="index == 2" src="@/assets/images/home/three.png" alt="" />
					<img v-else src="@/assets/images/home/normal.png" alt="" />
					<p style="position: absolute"> {{ index + 1 }}</p>
				</div>
				<div>{{ item.nodeName }}</div>
				<div>{{ item.ydzs }}</div>
				<div>{{ item.pjsd }}km/h</div>
				<!-- <div>{{ item.ydsc }}</div> -->
			</div>
		</div>
	</div>
</template>
<script>
	import {
		defineComponent,
		onMounted
	} from 'vue';
	import smallTitle from '@/components/smallTitle/index.vue';
	export default defineComponent({
		components: {
			smallTitle
		},
		props: {
			tableData: {
				type: Array,
				default: () => {
					return [];
				},
			},
		},
		setup() {
			onMounted(() => {});
			// const tableData = [
			//   {
			//     nodeName: '兰山区',
			//     ydzs: '1.99',
			//     pjsd: '43.47',
			//     ydsc: '23h',
			//   },
			//   {
			//     nodeName: '河东区',
			//     ydzs: '1.98',
			//     pjsd: '32.47',
			//     ydsc: '20h',
			//   },
			//   {
			//     nodeName: '费县',
			//     ydzs: '1.89',
			//     pjsd: '42.47',
			//     ydsc: '26h',
			//   },
			//   {
			//     nodeName: '莒南县',
			//     ydzs: '1.88',
			//     pjsd: '42.47',
			//     ydsc: '23h',
			//   },
			//   {
			//     nodeName: '平邑县',
			//     ydzs: '1.85',
			//     pjsd: '34.47',
			//     ydsc: '18h',
			//   },
			//   {
			//     nodeName: '蒙阴县',
			//     ydzs: '1.83',
			//     pjsd: '47.47',
			//     ydsc: '19h',
			//   },
			//   {
			//     nodeName: '沂水县',
			//     ydzs: '1.79',
			//     pjsd: '36.47',
			//     ydsc: '20h',
			//   },
			//   {
			//     nodeName: '临沭县',
			//     ydzs: '1.75',
			//     pjsd: '39.47',
			//     ydsc: '23h',
			//   },
			//   {
			//     nodeName: '郯城县',
			//     ydzs: '1.74',
			//     pjsd: '38.47',
			//     ydsc: '20h',
			//   },
			//   {
			//     nodeName: '罗庄区',
			//     ydzs: '1.73',
			//     pjsd: '39.47',
			//     ydsc: '19h',
			//   },
			// ];
			return {
				// tableData,
			};
		},
	});
</script>
<style lang="less" scoped>
	.child-box {
		width: 30%;
		height: 55%;
		margin: 30px 30px 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		.sub-title {
			background: url(@/assets/images/report/rightSubTitle.png) no-repeat;
			width: 100%;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 29px;
			color: white;
			font-size: 16px;
		}

		.right-table {
			display: flex;
			flex-direction: column;
			margin-top: 20px;
			width: 100%;

			.tab-heard {
				width: 100%;
				height: 50px;
				display: flex;

				div {
					height: 50px;
					flex: 1;
					color: white;
					font-size: 16px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.tab-body {
				height: 60px;
				width: 100%;
				display: flex;

				div {
					height: 60px;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #dbdbdbff;
					font-size: 16px;
				}
			}
		}
	}
</style>